<script setup>
import HomeAside from '@/components/home/HomeAside.vue'
</script>

<template>
  <div class="home-view">
    <el-container>
      <el-header class="main-title">
        <el-row>
          <el-col :span="18" class="flex-start-center">
            <el-icon :size="30">
              <Fold />
            </el-icon>
            <span>后台管理系统</span>
          </el-col>
          <el-col :span="6" class="flex-end-center">
            <span class="mr10">用户名</span>
            <el-button>退出登录</el-button>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
    <el-container class="home-container" style="height: 100%" >
      <el-aside width="200px" style="height: 100%">
        <HomeAside></HomeAside>
      </el-aside>
      <el-container>
        <el-header class="title"></el-header>
        <el-main style="height: 100%;width: 100%">
          <router-view style="height: 100%;width: 100%"></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<style scoped>
/*

.home-view{
  width: 100%;
  height: 100%;
}
.home-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
}
 */

.el-container {
  height: 100%;
  .main-title {
    height: 60px;
    line-height: 60px;
    background: #0ba6fa;

    .el-icon {
      cursor: pointer;
    }
  }

  .home-container {
    .el-aside {
      height: 100%;

      .el-menu {
        height: 100%;
      }
    }
  }
}
/* #67C23A */
</style>
